<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- 调用一个不存在的html标签，Fx要想让它生效，必须注册一个组件 -->
    <!-- 组件首字母大写 -->
    <Fx />
  </div>
  <script src="./js/vue.js"></script>
  <script>
    // 全局组件注册
    /* Vue.component('Fx', {
      // vue提供 创建虚拟dom
      render(createElement) {
        return createElement('div', '你好世界')
      }
    }) */
    /*
    <div>
      <a></a>
      <p>aaa</p>
    </div>
    */
    // 组件标签名和使用一致
    Vue.component('Fx', {
      // vue提供 创建虚拟dom
      render(createElement) {
        // div转为js对象
        return createElement(
          'div',
          {
            // 设置当有组件中的html属性
            attrs:{
              id:100,
              class:'haha'
            }
          },
          // 当前div组件的子组件定义
          [
            createElement(
              'a',
              {
                attrs:{
                  href:'http://www.baidu.com'
                }
              },
              '去百度一下'
            )
          ]
        )
      }
    })

    new Vue({
      el: '#root',
      data: {

      }
    })
  </script>
</body>

</html>